<template>
    <template v-if="list.length">
        <div v-if="publicData.id" class="visible_btn" @click="onVisible(publicInfo.id)">
            <el-image class="head_img" :src="publicInfo.head_img" fit="cover">
                <template #error>
                    <div>
                        <el-icon><icon-picture /></el-icon>
                    </div>
                </template>
            </el-image>
            <div class="publicInfo">
                <div class="nick_name">{{ publicInfo.nick_name }}</div>
                <div class="type_info">
                    <el-tag
                        v-if="publicInfo.service_type_info == 0 || publicInfo.service_type_info == 1"
                        type="danger"
                        size="small">
                        订阅号
                    </el-tag>
                    <el-tag v-if="publicInfo.service_type_info == 2" size="small">服务号</el-tag>
                </div>
            </div>
            <div class="msk_box"></div>
        </div>
        <div v-else class="open_box" @click="onVisible(publicInfo.id)">
            <el-icon class="icon_add">
                <Plus />
            </el-icon>
        </div>
        <SelectOfficialAccounts
            v-if="isShowSelectOfficialAccounts"
            :id="(state.official_account_id as number)"
            v-model:show="isShowSelectOfficialAccounts"
            @submit="onSubimt" />
    </template>
    <div v-else class="no_data">
        当前暂无可用已认证公众号，<span class="to_add" @click="onAddOfficeAccount">去添加</span>
    </div>
</template>

<script lang="ts" setup>
import bus from '@/utils/bus';
import router from '@/router';
import { ref, reactive, withDefaults, defineProps, defineEmits, onMounted, watch } from 'vue';
import { DFormat } from '@/utils/utils';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import SelectOfficialAccounts from '@/components/common/SelectOfficialAccounts.vue';

import { getOfficeAccountList, setOfficeAccount } from '@/api/channelconfig/officeAccount';
import { ElMessage } from 'element-plus';
interface Props {
    publicData?: any;
    disabled?: boolean | undefined;
}
interface StateType {
    [propsName: string]: string | number;
    is_set_mini: number;
    is_set_official: number;
}
const props = withDefaults(defineProps<Props>(), {
    publicData: () => ({ id: '', pageType: '' }),
    disabled: false
});
const emit = defineEmits(['submit']);
const isShowSelectOfficialAccounts = ref<boolean>(false);
const state = reactive<StateType>({
    mini_program_src: '/static/material/mini_program.png',
    official_accounts_src: '/static/material/official_accounts.png',
    mini_app_name: '',
    official_account_name: '',
    mini_program_id: 0,
    official_account_id: 0,
    is_set_mini: 1, // 1 未配置  2 已配置
    is_set_official: 1 // 1 未配置  2 已配置
});
const active = ref('');
const list: any = ref([]);
const visible = ref(false);
const visible2 = ref(false);
const publicInfo: any = ref({
    created_at: '',
    head_img: '',
    id: '',
    nick_name: '',
    service_type_info: '',
    verify_type_info: ''
});

const onHandleId = (data: any) => {};
const onDelete = () => {
    publicInfo.value.id = '';
};
const onClose = () => {
    emit('submit', '');
};
const onSubimt = (v: any) => {
    if (v) {
        publicInfo.value = list.value.find((item: any) => item.id == v);
        emit('submit', v);
        bus.emit('officialAccounts', publicInfo.value);
        visible.value = false;
    } else {
        ElMessage.warning('请选择公众号');
    }
};

const onOpenPage = () => {
    window.open('/channelconfig/officeAccount/oaManage');
};

const getList = async () => {
    const params = {
        page: 1,
        page_size: 100,
        verify_type_info: 0
    };
    const res = await getOfficeAccountList(params);
    list.value = res.data || [];
    if (list.value.length == 1) {
        publicInfo.value = list.value[0];
        active.value = list.value[0].id;
        emit('submit', active.value);
        bus.emit('officialAccounts', publicInfo.value);
    }

    if (props.publicData.id) {
        publicInfo.value = res.data.find((v: any) => v.id == props.publicData.id) || {};
    }
};
const onVisible = (id: any) => {
    if (props.disabled) return;
    state.official_account_id = +active.value;
    list.value.find((item: any) => {
        if (item.id == id) {
            publicInfo.value = item;
        }
    });
    active.value = id;
    visible.value = true;
    isShowSelectOfficialAccounts.value = true;
};
// 添加公众号
const onAddOfficeAccount = () => {
    router.push('/channelconfig/officeAccount/oaManage');
    // setOfficeAccount({ callback_front_url: location.href }).then((res1: any) => {
    //   window.open(res1.url)
    // })
};
watch(
    () => props.publicData.id,
    v => {
        active.value = v;
        if (v) {
            list.value.find((item: any) => {
                if (item.id == v) {
                    publicInfo.value = item;
                }
            });
        }
    }
);
onMounted(() => {
    getList();
});
</script>
<style lang="scss" scoped>
:deep(.active) {
    border: 1px solid #ff6b00 !important;
    cursor: pointer;
}
:deep(.is_hover:hover) {
    border: 1px solid #ff5b11;
    cursor: pointer;
}
.open_box {
    display: grid;
    place-content: center;
    width: 200px;
    height: 110px;
    border: 1px dashed #d9d9d9;
    background: #f9f9f9;
    border-radius: 6px;
    cursor: pointer;
    .icon_add {
        font-size: 30px;
        color: #fe6622;
    }
    &:hover {
        border: 1px dashed #ff6b00;
    }
}
.visible_btn {
    width: 241px;
    padding: 23px 20px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    cursor: pointer;
    display: flex;
    // &:hover {
    //   border: 1px solid #ff5b11;
    // }

    .head_img {
        width: 64px;
        height: 64px;
        margin-right: 12px;
        font-size: 64px;
    }
    .publicInfo {
        padding-top: 5px;
        .nick_name {
            padding-top: 2px;
            line-height: 1;
            font-weight: 700;
            color: #ff5b11;
        }
        .type_info {
            height: 32px;
        }
    }
}
.card_box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    grid-gap: 20px;
    font-weight: 700;
    line-height: 1;
    .card_top {
        display: grid;
        grid-template-columns: min(64px) 1fr;
        grid-template-rows: min(64px);
        grid-gap: 10px;
        margin-bottom: 5px;

        .top_img {
            width: 64px;
            height: 64px;
            font-size: 50px;
        }
        .top_r {
            padding-top: 5px;
            .top_title {
                margin-bottom: 10px;
                font-weight: 700;
                // color: #ff5b11;
            }
        }
    }
    .card_bottom {
        display: grid;
        grid-template-columns: min(64px) 1fr;
        grid-gap: 30px;
        padding-top: 8px;
        border-top: 1px solid #5e61661f;
        font-weight: normal;
        .bottom_content {
            display: flex;
            align-items: center;
            img {
                width: 16px;
                height: 16px;
                margin-right: 6px;
            }
        }
    }
}

.tpd_dialog {
    // .content_header {
    //   display: flex;
    //   align-items: center;
    //   margin-bottom: 10px;
    //   .title {
    //     // border-right: 1px solid #a9aaac;
    //     padding-right: 8px;
    //     margin-right: 6px;
    //     font-weight: 700;
    //   }
    //   .icon {
    //     margin-right: 10px;
    //   }
    // }

    .bottom {
        display: flex;

        margin-bottom: 15px;
        .left {
            margin-right: 10px;
            .el-icon {
                font-size: 60px;
            }
        }
        .right {
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align-last: left;
            .right_h3 {
                padding-bottom: 10px;
                font-weight: 700;
            }
            .right_btn {
                margin-left: -30px;
            }
        }
    }
    .footer {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 15px;
        border-top: 1px solid #aaa3;

        .icon_warning {
            display: flex;
            align-items: center;
            width: 70px;
        }
        .icon_monitor {
            display: flex;
            align-items: center;
        }
    }
    .btn_box {
        display: flex;
        justify-content: space-between;
    }
    // 添加公众号授权弹窗
    .empower {
        display: flex;
        align-items: center;
        flex-direction: column;
        .empower_image {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 60%;
            padding: 30px 0 38px;
            margin-left: 90px;
            // background-color: green;
            .empower_image_left {
                width: 64px;
                height: 64px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .empower_image_center {
                width: 68px;
                height: 68px;
                background: url('@/assets/smartMarketing/bind.png') no-repeat;
            }
            .empower_image_right {
                width: 157px;
                height: 37px;
                background: url('@/assets/login/login_log.png') no-repeat;
                background-size: 80% 80%;
            }
        }
        .empower_btn {
            height: 80px;
        }
        .empower_text {
            height: 60px;
        }
    }
    :deep .el-link--inner {
        color: #fff;
    }
}
.no_data {
    .to_add {
        color: #ff6b00;
        cursor: pointer;
    }
}
</style>
